<template>
	<view>
		<u-popup :show="show" :round="10" mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false" @close="close" @open="open">
			<view class="box p-30 flex flex-col jc-c ai-c rel">
				<view class="abs top-box flex jc-c ai-c">
					<view class="">
						<u-image shape="circle" width="150rpx" height="150rpx" src="/static/logo.png"></u-image>
					</view>
				</view>
				<view class="m-b-50 m-t-80 ft-30">登录后提供更好的服务</view>
				<!-- <view class="m-b-20" v-if="need">
					<u-checkbox-group @change="changeIsDefault">
						<u-checkbox :checked="protocol" activeColor="#2979ff"></u-checkbox>
						<text class="ft-24">已阅读并同意</text>
						<text class="ft-24 link" @click="openProtocol">《隐私协议》</text>
					</u-checkbox-group>
				</view> -->
				<view style="width: 400rpx">
					<u-button type="primary" shape="circle" text="立即登录" @click="toLogin"></u-button>
				</view>
				<view class="m-t-10 ft-24 p-20" @click="close" style="color: #999">暂不登录</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { login } from '@/api/api.js';
export default {
	name: 'loginPopup',
	data() {
		return {
			show: false,
			need: true,
			protocol: false
		};
	},
	methods: {
		open: function () {
			this.show = true;
		},
		close: function () {
			this.show = false;
		},
		changeIsDefault: function () {
			this.$set(this, 'protocol', !this.protocol);
		},
		openProtocol: function () {
			// #ifdef MP-WEIXIN
			wx.openPrivacyContract({
				success: () => {
					this.$set(this, 'protocol', true);
				}
			});
			// #endif
		},
		toLogin: function () {
			let _this = this
			uni.showLoading({
				title: '正在登录中...'
			});
			uni.login({
				provider: 'weixin',
				success: function (res) {
					login({ code: res.code })
						.then((r) => {
							_this.close();
							console.log('token',r.token);
							console.log('userInfo',r.userInfo);
							_this.$store.commit('LOGIN',r.token)
							_this.$cache.set('userInfo', r.userInfo);
							_this.$emit('loginAfter')
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
						})
						.catch((err) => {
							console.log('🐛🐛🐛',err);
							uni.hideLoading();
						});
				}
			});
			
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 500rpx;

	.top-box {
		top: -90rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.link {
		color: #2d8cf0;
		text-decoration: underline;
	}
}
</style>
